<template>
  <div class="productDetail">
    <CDWHeader title="商品详情" />
    <div class="swipe-box">
      <van-swipe :autoplay="3000" loop>
        <van-swipe-item v-for="(image, index) in goodsInfo.images" :key="index">
          <img v-lazy="image.imagePath" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="pages">
      <div class="product-head">
        <div class="hd">
          <div class="score-num">
            <em>{{ goodsInfo.creditsNum }}</em
            >积分
          </div>
        </div>
        <div class="name">
          {{ goodsInfo.goodsName }}
        </div>
      </div>
      <div class="product-info">
        <div class="cell-item">
          <div class="cell-item-label">商品类型：</div>
          <div class="cell-item-txt">{{ goodsInfo.goodsTypeName }}</div>
        </div>
        <div class="cell-item">
          <div class="cell-item-label">是否限购：</div>
          <div class="cell-item-txt" v-if="!goodsInfo.isLimit">可多次购买</div>
          <div class="cell-item-txt" v-else>
            剩余兑换次数：{{ goodsInfo.remainingNum }}
          </div>
        </div>
        <div class="cell-item">
          <div class="cell-item-label">配送方式：</div>
          <div class="cell-item-txt">
            {{ goodsInfo.shipTypeArr }}
          </div>
        </div>
        <div class="cell-item">
          <div class="cell-item-label">商品库存：</div>
          <div class="cell-item-txt">{{ goodsInfo.num }}</div>
        </div>
      </div>
      <div class="product-docs" v-html="goodsInfo.details"></div>
      <div class="delivery-docs">
        <div class="title">配送及兑换说明</div>
        <div class="docs">
          {{ goodsInfo.shipMessage }}
        </div>
      </div>
      <div class="goods-action">
        <div class="goods-btn disabled" v-if="!goodsInfo.pointBuy">
          积分不足
        </div>
        <div class="goods-btn disabled" v-else-if="goodsInfo.num <= 0">
          已兑完
        </div>
        <div
          class="goods-btn disabled"
          v-else-if="goodsInfo.isLimit && goodsInfo.remainingNum < 1"
        >
          无可用兑换次数
        </div>
        <div class="goods-btn" @click="onceExchange()" v-else>立即兑换</div>
      </div>
    </div>
  </div>
</template>

<script>
import CDWHeader from "@/components/header";
export default {
  name: "productDetail",
  components: {
    CDWHeader,
  },
  data() {
    return {
      id: this.$route.query.id,
      goodsInfo: {},
      userInfo: {},
      goodstypeCode: "",
    };
  },
  created() {
    this.goodsDetails(this.id);
  },
  updated() {},
  methods: {
    goodsDetails(goodsId) {
      this.$http.get("/api/shop/goods/" + goodsId, {}).then((res) => {
        if (res.code == "0") {
          this.goodsInfo = res.data;
          this.goodstypeCode = res.data.goodstypeCode;
        }
      });
    },
    onceExchange() {
      let query = {
        goodsId: this.id,
        goodstypeCode: this.goodstypeCode,
        num: this.goodsInfo.num,
      };
      this.$router.push({ path: "/acknowledgementOfOrder", query });
    },
  },
};
</script>
<style scoped lang="less">
.productDetail {
  padding-bottom: 60px;
  .swipe-box {
    background: #fff;
    background-image: linear-gradient(#fff, #f3f5f8);
    img {
      width: 100%;
      height: 319px;
    }
  }
  .product-head {
    padding: 10px;
    margin-top: 10px;
    background: #fff;
    border-radius: 12px;
    .name {
      margin-bottom: 6px;
      font-weight: 700;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .hd {
      display: flex;
      .score-num {
        flex: 1;
        color: #51afb1;
        em {
          padding-right: 2px;
          font-size: 24px;
          font-weight: 700;
        }
      }
    }
  }
  .product-info {
    padding: 2px 10px;
    margin-top: 12px;
    background: #fff;
    border-radius: 12px;
    .cell-item {
      display: flex;
      padding: 10px 0;
      border-bottom: 1px solid #ebedf0;
      &:last-of-type {
        border: 0;
      }
      &-label {
        color: #999;
      }
      &-txt {
        flex: 1;
        text-align: right;
        .line {
          display: inline-block;
          height: 12px;
          margin: 0 6px;
          vertical-align: middle;
          border-left: 1px solid #ebedf0;
        }
      }
    }
  }
  .product-docs {
    margin: 12px 0;
    /deep/ img {
      width: 100%;
      height: 290px;
      border-radius: 8px;
    }
  }
  .delivery-docs {
    padding: 6px 10px 12px;
    background: #fff;
    border-radius: 12px;
    .title {
      padding-left: 6px;
      font-size: 16px;
      line-height: 20px;
      height: 18px;
      margin: 10px 0;
      border-left: 4px solid #51afb1;
    }
    .docs {
      color: #999;
    }
  }
  .goods-action {
    position: fixed;
    left: 0;
    bottom: -1px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    padding: 4px 18px;
    border-top: 1px solid #ebedf0;
    background: #fff;
    .goods-btn {
      flex: 1;
      height: 48px;
      line-height: 48px;
      font-size: 18px;
      text-align: center;
      color: #fff;
      background: #51afb1;
      border-radius: 8px;
      &.disabled {
        background: #ccc;
      }
    }
  }
}
</style>
